<template>
	<view class="content font_family" :style="{paddingTop:menuButtonInfo}">
		<view class="page_title">
			购物车
		</view>
		<view class="list">
			<view class="item f_j" v-for="(item,index) in list" :key="index"
				@click="go(`/pages/detail/detail?id=${item.goods_id}`)">
				<view class="gx">
					<image @click.stop="gx(false,item)" v-if="item.gx" src="../../static/public/gx.png" mode=""></image>
					<image @click.stop="gx(true,item)" v-else src="../../static/public/no_gx.png" mode=""></image>
				</view>
				<view class="msg f">
					<image :src="item.goods_image" mode="aspectFill"></image>
					<view class="right f_d f_z_b">
						<view class="title text_ellipsis2">
							{{item.goods_title}}
						</view>
						<view class="gg">
							<text>规格：</text>
							<text>{{item.item_name}}</text>
						</view>
						<view class="add f_z_b">
							<view class="price">
								<text class="icon">￥</text>
								<text>{{item.price}}</text>
							</view>
							<view class="add_btn f_j">
								<image @click.stop="car_jian(item)" src="../../static/public/jian_car.png" mode="">
								</image>
								<view class="car_num f_z">{{item.count}}</view>
								<image @click.stop="car_add(item)" src="../../static/public/add_car.png" mode="">
								</image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-empty text='购物车没有商品,快去选购吧!~' icon="/static/public/kong.png" v-if="list.length==0">
			</u-empty>
			<view class="zw" :style="{height:zw_height+'px'}">

			</view>
		</view>
		<!-- <movable-area class="js_movable">
			<movable-view x="15" y="1000" direction="all" class="js_view"> -->
		<view class="js_box">
			<view class="js_btn f_z_b f_j">
				<view class="all f_j" @click="all_gx">
					<image v-if="all" src="../../static/public/gx.png" mode=""></image>
					<image v-else src="../../static/public/no_gx.png" mode=""></image>
					<text>全选</text>
				</view>
				<view class="total f_j">
					<text>合计：</text>
					<text class="price">￥{{total_price.toFixed(1)}}</text>
				</view>
				<view class="go_buy f_zj" @click="go_pay">
					去结算
				</view>
			</view>
		</view>
		<!-- 	</movable-view>
		</movable-area> -->
		<!-- 客服悬浮按钮 -->
		<movable-area class="js_movable">
			<movable-view x="350" y="620" direction="all" class="js_view f_zj">
				<button open-type="contact" class="f_d f_j kf_btn">
					<image src="../../static/public/kf.png" mode=""></image>
					<view class="">
						客服
					</view>
				</button>
			</movable-view>
		</movable-area>
	</view>
</template>

<script>
	import { carList } from '@/api/page.js'
	import { reduce, joinCar } from '@/api/user.js'
	import { mapState, mapMutations } from 'vuex'
	export default {
		computed: {
			...mapState(['menuButtonInfo', 'dl_id', 'car_num'])
		},
		data() {
			return {
				all: false,
				query_data: {
					dl: ''
				},
				list: [],
				total_price: 0.00,
				car_query: {
					goods_id: '',
					item_name: '',
					count: 1
				},
				zw_height: 0
			}
		},
		onShow() {
			this.total_price = 0.00
			this.query_data.dl = this.dl_id
			this.all = false
			this.get_car_list()

			// 清除角标
			uni.removeTabBarBadge({
				index: 2
			})
			this.set_car_num(0)
		},
		watch: {
			// dl_id(val, old) {
			// 	this.query_data.dl = val
			// }
			car_num(val, old) {
				if (val > 0) {
					console.log(val, '添加购物车了')
					uni.setTabBarBadge({
						index: 2,
						text: `${val}`
					})
				}
			}
		},
		onReady() {
			this.get_zw_height()
		},
		methods: {
			...mapMutations(['set_car_num']),
			// 获取购物车列表
			get_car_list() {
				carList(this.query_data).then(res => {
					console.log(res)
					if (res.code == 1) {
						res.data.forEach(item => {
							item.gx = false
						})
						this.list = res.data
						console.log(this.list)
					}
				})
			},
			// 减少数量
			car_jian(item) {
				this.car_query.goods_id = item.goods_id
				this.car_query.item_name = item.item_name
				reduce(this.car_query).then(res => {
					if (res.code == 1) {
						item.count -= 1
						this.$forceUpdate()
						if (item.count == 0) {
							this.get_car_list()
						}
						this.js_total()
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			//增加数量
			car_add(item) {
				this.car_query.goods_id = item.goods_id
				this.car_query.item_name = item.item_name
				joinCar(this.car_query).then(res => {
					if (res.code == 1) {
						item.count += 1
						this.$forceUpdate()
						this.js_total()
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			// 勾选商品
			gx(type, item) {
				let no_gx = 0
				item.gx = type
				this.list.forEach(item => {
					if (item.gx == false) {
						no_gx += 1
					}
				})
				if (no_gx > 0) {
					this.all = false
				} else {
					this.all = true
				}
				this.$forceUpdate()
				this.js_total()
			},
			all_gx() {
				if (this.list.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '购物车还没有商品，快去选购吧!~'
					})
					return
				}
				if (this.all) {
					this.all = false
					this.list.forEach(item => {
						item.gx = false
					})
				} else {
					this.all = true
					this.list.forEach(item => {
						item.gx = true
					})
				}
				this.js_total()
			},
			// 计算商品总价
			js_total() {
				let price = 0
				this.list.forEach(item => {
					if (item.gx == true) {
						price += (item.price * 1) * item.count
					}
				})
				this.total_price = price
			},
			// 去结算
			go_pay() {
				let arr = []
				let car_id = []
				this.list.forEach(item => {
					if (item.gx) {
						arr.push(item)
						car_id.push(item.id)
					}
				})
				console.log(arr)
				if (arr.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '请选择需要购买的商品！'
					})
					return
				}
				this.go(`/pages/order/qr_order?car=${JSON.stringify(car_id)}&msg=${JSON.stringify(arr)}`)
			},
			// 获取结算框高度
			get_zw_height() {
				this.$u.getRect('.js_box').then(res => {
					this.zw_height = res.height + 20
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		background: linear-gradient(to bottom, rgb(255, 245, 244) 0%, rgb(255, 255, 255) 30%);
		padding: 30rpx;
		// padding-bottom: 0rpx;

		.page_title {
			font-weight: 400;
			font-size: 44rpx;
			color: #232323;
		}

		.list {
			.zw {
				width: 100%;
			}

			margin-top: 60rpx;

			.item {
				margin-bottom: 50rpx;

				.gx {
					image {
						width: 36rpx;
						height: 36rpx;
					}
				}

				.msg {
					flex: 1;
					margin-left: 20rpx;

					image {
						width: 180rpx;
						height: 152rpx;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
					}

					.right {
						margin-left: 20rpx;
						flex: 1;

						.title {
							font-weight: 400;
							font-size: 26rpx;
							color: #232323;
						}

						.gg {
							font-weight: 400;
							font-size: 26rpx;
							color: #999999;
						}

						.add {
							.price {
								font-weight: 400;
								font-size: 40rpx;
								color: #FF5353;

								.icon {
									font-size: 28rpx;
								}
							}

							.add_btn {
								.car_num {
									width: 100rpx;
								}

								image {
									width: 46rpx;
									height: 46rpx;
								}
							}
						}
					}
				}
			}
		}

		// .js_movable {
		// 	width: 100vw;
		// 	height: 90vh;
		// 	position: fixed;
		// 	top: 0rpx;
		// 	left: 0rpx;
		// 	z-index: 9999999;
		// 	pointer-events: none;

		// 	.js_view {
		// 		// width: 100vw;
		// 		width: 690rpx;
		// 		pointer-events: all;
		// 	}
		// }

		.js_box {
			position: fixed;
			bottom: 20px;
			width: 100vw;

			.js_btn {
				padding: 0rpx 30rpx;
				padding-right: 0rpx;
				box-sizing: border-box;
				width: 690rpx;
				height: 106rpx;
				background: #FFFFFF;
				box-shadow: 0rpx -2rpx 12rpx 0rpx rgba(0, 0, 0, 0.05);
				border-radius: 1118rpx 1118rpx 1118rpx 1118rpx;

				.all {
					font-weight: 250;
					font-size: 28rpx;
					color: #2B2D30;

					image {
						margin-right: 15rpx;
						width: 35rpx;
						height: 35rpx;
					}
				}

				.total {
					font-weight: 250;
					font-size: 28rpx;
					color: #232323;

					.price {
						font-weight: 400;
						font-size: 40rpx;
						color: #FF3767;
					}
				}

				.go_buy {
					width: 204rpx;
					height: 106rpx;
					background: #EE4133;
					border-radius: 1118rpx 1118rpx 1118rpx 1118rpx;
					font-weight: 400;
					font-size: 30rpx;
					color: #FFFFFF;
				}
			}
		}
	}
</style>